<template>
    <div class="trend" :class="{ 'data-flag': flag, 'trend__reverse':colorful && reverseColor}">
        <slot></slot>
        <span v-if="flag" :class="'trend__'+flag">
            <caret-up-outlined
                v-if="flag == 'up'"
                :style="{fontSize: '10px'}"
            />
            <caret-down-outlined
                v-if="flag == 'down'"
                :style="{fontSize: '10px'}"
            />
        </span>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, useSlots } from 'vue';
import { CaretUpOutlined, CaretDownOutlined,  } from '@ant-design/icons-vue';
defineProps({
    /** 上升下降标识 */
    flag: {
        type: String,
    },
    /** 是否彩色标记 */
    colorful: {
        type: Boolean,
        default: true
    },
    /** 颜色反转 */
    reverseColor: {
        type: Boolean,
        default: false
    },
})
</script>
<script lang="ts" >
export default {
    name: 'trend'
}
</script>
<style lang="less" scoped>
@number-info-prefix: ~".number-info";
@text-color: fade(#000, 85%);
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@green-6: #52c41a;
@text-color-secondary: fade(#000, 45%);
@red-6: #f5222d;
@heading-color: fade(#000, 85%);
@trend-prefix: ~".trend";

@{trend-prefix} {
    display: inline-block;
    font-size: @font-size-base;
    line-height: 22px;
    &__up,
    &__down {
        position: relative;
        top: 1px;
        margin-left: 4px;
        i {
            font-size: 12px;
            transform: scale(0.83);
        }
    }
    &__up {
        color: @red-6;
    }
    &__down {
        top: -1px;
        color: @green-6;
    }
    &__grey {
        @{trend-prefix}__up,
        @{trend-prefix}__down {
            color: @text-color;
        }
    }
    &__reverse {
        @{trend-prefix}__up {
            color: @green-6;
        }
        @{trend-prefix}__down {
            color: @red-6;
        }
    }
}
</style>



